<template>
  <div>
    <div class="total-list">
      <CardGroupIndex :data="cardData"></CardGroupIndex>
    </div>
    <div class="g-card g-pad20" style="margin-top: 0;">
      <div class="title">
        数据趋势
      </div>
      <div class="data-content" style="margin-top: 20px;">
        <div class="chart-content">
          <search-title :showScene="true" @search="getLineData"></search-title>
          <chart-line style="height: 300px;" :legend="legend" :xData="xdata" :series="series"></chart-line>
        </div>
      </div>
    </div>
    <div class="g-card g-pad20" style="margin-top: 20px;">
      <div class="title">
        活码客群
      </div>
      <div class="data-content" style="margin-top: 20px;">
        <div class="table-content">
          <el-table v-loading="loading" :data="tableList" style="width: 100%;">
            <el-table-column label="客群名称" align="center" min-width="100" prop="groupName" show-overflow-tooltip />
            <el-table-column label="群主" align="center" min-width="100" prop="groupOwner" show-overflow-tooltip />
            <el-table-column
              label="群总人数"
              align="center"
              prop="chatGroupMemberTotalNum"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="进群人数"
              align="center"
              prop="joinChatGroupTotalMemberNum"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="退群人数"
              align="center"
              prop="exitChatGroupTotalMemberNum"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="mini"
                  @click="
                    $router.push({
                      path: '/groupManage/customerGroupManage/groupDetail',
                      query: {
                        chatId: row.chatId
                      }
                    })
                  "
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ChartLine from '@/components/ChartLine.vue'
  import SearchTitle from '../components/SearchTitle.vue'
  import CardGroupIndex from '@/components/CardGroupIndex.vue'
  import { getLineChartTotal, getTableTotal, getGroupDetail } from '@/api/drainageCode/group.js'
  export default {
    name: 'group-analyse',
    components: {
      CardGroupIndex,
      SearchTitle,
      ChartLine
    },
    data() {
      return {
        id: '',
        groupId: '',
        exportLoading: false,
        legend: ['进群人数', '退群人数'],
        xdata: [],
        series: [],
        cardData: [
          {
            title: '活码客群数',
            tips: '当前群活码所有群聊数量，包括自动建立的群',
            value: 0,
            noArrow: true
          },
          {
            title: '群总人数',
            tips: '当前群活码全部群的总人数(含员工及重复)',
            value: 0,
            title1: '较昨日',
            value1: 0
          },
          {
            title: '进群人数',
            tips: '通过当前群活码进群的人数(去重)',
            value: 0,
            title1: '较昨日',
            value1: 0
          },
          {
            title: '退群人数',
            tips: '通过当前群活码进群后退群的人数(去重)',
            value: 0,
            title1: '较昨日',
            value1: 0
          }
        ],
        total: 0,
        query: {
          id: ''
        },
        tableList: [],
        loading: false,
        searchData: {},
        bar1: [],
        bar2: []
      }
    },
    methods: {
      getCardData() {
        getGroupDetail(this.groupId).then((res) => {
          if (res.code === 200) {
            let data = res.data
            this.cardData[0].value = data.chatGroupNum
            this.cardData[1].value = data.chatGroupMemberTotalNum //群总人数
            this.cardData[2].value = data.joinChatGroupTotalMemberNum // 进群
            this.cardData[3].value = data.exitChatGroupTotalMemberNum // 退群
            this.cardData[1].value1 =
              Number(data.newJoinChatGroupTotalMemberNum) - Number(data.oldJoinChatGroupTotalMemberNum)
            this.cardData[2].value1 =
              Number(data.joinChatGroupTotalMemberNum) - Number(data.oldJoinChatGroupTotalMemberNum)
            this.cardData[3].value1 =
              Number(data.exitChatGroupTotalMemberNum) - Number(data.oldExitChatGroupTotalMemberNum)
          }
        })
      },
      getLineData(data) {
        this.$forceUpdate()
        getLineChartTotal({ ...data, state: this.id }).then((res) => {
          this.xdata = []
          this.series = []
          let arr1 = []
          let arr2 = []
          if (res.data && res.data.length) {
            res.data.forEach((dd) => {
              this.xdata.push(dd.dateTime)
              arr1.push(dd.joinChatGroupTotalMemberNum)
              arr2.push(dd.exitChatGroupTotalMemberNum)
            })
            this.series = [arr1, arr2]
          }
        })
      },
      getTableFn() {
        this.loading = true
        getTableTotal(this.groupId).then((res) => {
          this.tableList = res.data
          this.loading = false
        })
      }
    },
    created() {
      this.id = this.$route.query.id
      this.groupId = this.$route.query.groupId
      this.getCardData()
      this.getTableFn()
    }
  }
</script>
<style lang="scss" scoped>
  .total-list {
    .item {
      padding: 10px;
      background-color: #fff;
    }
  }
  .title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .data-content {
    margin-top: 10px;
    .chart-content {
      margin-top: 10px;
      .my_button {
        float: right;
      }
      .column {
        display: flex;
        .column-item {
          flex: 1;
        }
      }
    }
    .search-content {
      display: flex;
      justify-content: space-between;
    }
    .table-content {
      margin-top: 10px;
    }
  }
</style>
